<template>
  <div class="more-page">
    <!-- 用户信息区域 -->
    <div class="user-info-section">
      <div class="avatar-area">
        <img src="http://120.26.146.100:8889/public/monkey.png" alt="头像" class="avatar">
      </div>
      <div class="user-details">
        <h3 class="user-name">{{ userName || '我的' }}</h3>
        <p class="user-desc">{{ userDesc || '智能伙伴系统' }}</p>
      </div>
    </div>

    <!-- 功能分类区域 -->
    <div class="function-section">
      <div class="section-header">
        <h4>常用工具</h4>
      </div>
      <div class="function-grid">
        <div class="function-item" @click="navigateTo('/team')">
          <div class="icon-container" style="background-color: #e3f2fd;">
            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%232196f3' d='M352 224v-64h-64v64h-128v64h128v128h64v-128h128v-64h-128zM960 512v-64h-128v64h-128v128h128v128h64v-128h128v-64h-128zM832 512v-64h-64v64h-128v64h128v128h64v-128h128v-64h-128zM352 960v-64h-64v64h-128v-64h128v-128h64v128h128v64h-128zM576 224v-64h-64v64h-64v64h64v128h64v-128h64v-64h-64zM704 768v-64h-64v64h-64v64h64v64h64v-64h64v-64h-64zM576 512v-64h-64v64h-64v64h64v128h64v-128h64v-64h-64zM352 768v-64h-64v64h-64v64h64v64h64v-64h64v-64h-64zM576 768v-64h-64v64h-64v64h64v64h64v-64h64v-64h-64zM704 224v-64h-64v64h-64v64h64v128h64v-128h64v-64h-64zM352 512v-64h-64v64h-64v64h64v128h64v-128h64v-64h-64zM704 512v-64h-64v64h-64v64h64v128h64v-128h64v-64h-64zM576 960v-64h-64v64h-64v-64h64v-128h64v128h64v64h-64z'/%3E%3C/svg%3E" alt="" class="function-icon">
          </div>
          <span class="function-name">我的团队</span>
        </div>
        <div class="function-item" @click="navigateTo('/chatCenter')">
          <div class="icon-container" style="background-color: #e8f5e8;">
            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%234caf50' d='M896 192h-64v-64c0-17.664-14.336-32-32-32h-576c-17.664 0-32 14.336-32 32v64h-64c-17.664 0-32 14.336-32 32v576c0 17.664 14.336 32 32 32h64v64c0 17.664 14.336 32 32 32h576c17.664 0 32-14.336 32-32v-64h64c17.664 0 32-14.336 32-32v-576c0-17.664-14.336-32-32-32zM256 288h512v384h-512v-384z'/%3E%3C/svg%3E" alt="" class="function-icon">
          </div>
          <span class="function-name">我的消息</span>
        </div>
        <div class="function-item" @click="navigateTo('/aiAssistant')">
          <div class="icon-container" style="background-color: #f3e5f5;">
            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%239c27b0' d='M512 0c-282.752 0-512 229.248-512 512s229.248 512 512 512 512-229.248 512-512-229.248 512-512-512zM512 960c-247.424 0-448-200.576-448-448s200.576-448 448-448 448 200.576 448 448-200.576 448-448 448zM576 384c17.664 0 32-14.336 32-32s-14.336-32-32-32-32 14.336-32 32 14.336 32 32 32zM448 384c17.664 0 32-14.336 32-32s-14.336-32-32-32-32 14.336-32 32 14.336 32 32 32zM320 384c17.664 0 32-14.336 32-32s-14.336-32-32-32-32 14.336-32 32 14.336 32 32 32zM640 512c0-17.664-14.336-32-32-32s-32 14.336-32 32c0 17.664 14.336 32 32 32s32-14.336 32-32zM576 640c17.664 0 32-14.336 32-32s-14.336-32-32-32-32 14.336-32 32 14.336 32 32 32zM448 640c17.664 0 32-14.336 32-32s-14.336-32-32-32-32 14.336-32 32 14.336 32 32 32zM320 640c17.664 0 32-14.336 32-32s-14.336-32-32-32-32 14.336-32 32 14.336 32 32 32zM704 384c17.664 0 32-14.336 32-32s-14.336-32-32-32-32 14.336-32 32 14.336 32 32 32z'/%3E%3C/svg%3E" alt="" class="function-icon">
          </div>
          <span class="function-name">AI助手</span>
        </div>
        <div class="function-item" @click="navigateTo('/workbench')">
          <div class="icon-container" style="background-color: #e3f2fd;">
            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%232196f3' d='M768 320c0-53.024-42.976-96-96-96h-320c-53.024 0-96 42.976-96 96v384c0 53.024 42.976 96 96 96h320c53.024 0 96-42.976 96-96v-384zM288 288h384c70.592 0 128 57.408 128 128v384c0 70.592-57.408 128-128 128h-384c-70.592 0-128-57.408-128-128v-384c0-70.592 57.408-128 128-128zM640 448h-256v-64h256v64zM640 576h-256v-64h256v64z'/%3E%3C/svg%3E" alt="" class="function-icon">
          </div>
          <span class="function-name">工作台</span>
        </div>
        <div class="function-item" @click="navigateTo('/applyCenter')">
          <div class="icon-container" style="background-color: #fff3e0;">
            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23ff9800' d='M896 256h-768v448h768v-448zM960 192h-896c-35.344 0-64 28.656-64 64v512c0 35.344 28.656 64 64 64h896c35.344 0 64-28.656 64-64v-512c0-35.344-28.656-64-64-64zM640 384h192v64h-192v-64zM640 512h192v64h-192v-64zM640 640h192v64h-192v-64zM384 384h192v64h-192v-64zM384 512h192v64h-192v-64zM384 640h192v64h-192v-64zM128 384h192v64h-192v-64zM128 512h192v64h-192v-64zM128 640h192v64h-192v-64z'/%3E%3C/svg%3E" alt="" class="function-icon">
          </div>
          <span class="function-name">新的朋友</span>
        </div>
      </div>
    </div>

    <!-- 商务合作区域 -->
    <div class="function-section">
      <div class="section-header">
        <h4>商务合作</h4>
      </div>
      <div class="function-grid">
        <div class="function-item" @click="navigateTo('/selectUserCenter')">
          <div class="icon-container" style="background-color: #e0f7fa;">
            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%2300bcd4' d='M512 0c-282.752 0-512 229.248-512 512s229.248 512 512 512 512-229.248 512-512-229.248-512-512-512zM512 960c-247.424 0-448-200.576-448-448s200.576-448 448-448 448 200.576 448 448-200.576 448-448 448zM672 480l-192-192-192 192 44.8 44.8 147.2-147.2 147.2 147.2z'/%3E%3C/svg%3E" alt="" class="function-icon">
          </div>
          <span class="function-name">找人</span>
        </div>
        <div class="function-item" @click="navigateTo('/search')">
          <div class="icon-container" style="background-color: #ffebee;">
            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23f44336' d='M812.902 749.333l-210.667-210.666c29.44-37.035 47.104-85.333 47.104-139.605 0-111.963-90.795-202.752-202.752-202.752s-202.752 90.79-202.752 202.752 90.795 202.752 202.752 202.752c54.272 0 102.571-17.664 139.605-47.104l210.667 210.666c12.352 12.352 32.448 12.352 44.8 0l54.805-54.805c12.352-12.352 12.352-32.448 0-44.8zM281.6 486.4c-69.12 0-125.44-56.32-125.44-125.44 0-69.12 56.32-125.44 125.44-125.44s125.44 56.32 125.44 125.44c0 69.12-56.32 125.44-125.44 125.44z'/%3E%3C/svg%3E" alt="" class="function-icon">
          </div>
          <span class="function-name">匹配伙伴</span>
        </div>
        <div class="function-item" @click="navigateTo('/team/add')">
          <div class="icon-container" style="background-color: #e3f2fd;">
            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%232196f3' d='M512 0c-282.752 0-512 229.248-512 512s229.248 512 512 512 512-229.248 512-512-229.248 512-512-512zM512 960c-247.424 0-448-200.576-448-448s200.576-448 448-448 448 200.576 448 448-200.576 448-448 448zM512 640c-17.664 0-32-14.336-32-32v-192c0-17.664 14.336-32 32-32s32 14.336 32 32v192c0 17.664-14.336 32-32 32zM512 512c-17.664 0-32-14.336-32-32h-192c0 17.664-14.336 32-32 32s-32-14.336-32-32c0-17.664 14.336-32 32-32h192c0-17.664 14.336-32 32-32s32 14.336 32 32c0 17.664-14.336 32-32 32z'/%3E%3C/svg%3E" alt="" class="function-icon">
          </div>
          <span class="function-name">发起合作</span>
        </div>
        <div class="function-item" @click="navigateTo('/geoSearch')">
          <div class="icon-container" style="background-color: #e8f5e8;">
            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%234caf50' d='M512 0c-282.752 0-512 229.248-512 512s229.248 512 512 512 512-229.248 512-512-229.248 512-512-512zM512 960c-247.424 0-448-200.576-448-448s200.576-448 448-448 448 200.576 448 448-200.576 448-448 448zM512 448c-35.344 0-64 28.656-64 64s28.656 64 64 64 64-28.656 64-64-28.656-64-64-64zM512 320c-90.496 0-173.44 46.336-219.033 116.992l53.291 53.291c27.264-45.722 88.192-74.283 165.742-74.283s138.478 28.561 165.742 74.283l53.291-53.291c-45.593-70.656-128.538-116.992-219.033-116.992z'/%3E%3C/svg%3E" alt="" class="function-icon">
          </div>
          <span class="function-name">附近伙伴</span>
        </div>
      </div>
    </div>

    <!-- 工具服务区域 -->
    <div class="function-section">
      <div class="section-header">
        <h4>工具服务</h4>
      </div>
      <div class="function-grid">
        <div class="function-item" @click="showToast('功能开发中')">
          <div class="icon-container" style="background-color: #f3e5f5;">
            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%239c27b0' d='M512 0c-282.752 0-512 229.248-512 512s229.248 512 512 512 512-229.248 512-512-229.248 512-512-512zM512 960c-247.424 0-448-200.576-448-448s200.576-448 448-448 448 200.576 448 448-200.576 448-448 448zM768 512h-256v-256h256v256zM512 768h256v-256h-256v256zM256 768h256v-256h-256v256z'/%3E%3C/svg%3E" alt="" class="function-icon">
          </div>
          <span class="function-name">智能会议</span>
        </div>
        <div class="function-item" @click="showToast('功能开发中')">
          <div class="icon-container" style="background-color: #fff3e0;">
            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23ff9800' d='M768 320c0-53.024-42.976-96-96-96h-320c-53.024 0-96 42.976-96 96v384c0 53.024 42.976 96 96 96h320c53.024 0 96-42.976 96-96v-384zM288 288h384c70.592 0 128 57.408 128 128v384c0 70.592-57.408 128-128 128h-384c-70.592 0-128-57.408-128-128v-384c0-70.592 57.408-128 128-128zM640 448h-256v-64h256v64zM640 576h-256v-64h256v64z'/%3E%3C/svg%3E" alt="" class="function-icon">
          </div>
          <span class="function-name">日程安排</span>
        </div>
        <div class="function-item" @click="navigateToDocumentManage">
          <div class="icon-container" style="background-color: #e0f7fa;">
            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%2300bcd4' d='M768 320v448h-512v-448h512zM832 256h-640v576h640v-576zM960 192h-896c-35.344 0-64 28.656-64 64v640c0 35.344 28.656 64 64 64h896c35.344 0 64-28.656 64-64v-640c0-35.344-28.656-64-64-64zM960 896h-896v-640h896v640z'/%3E%3C/svg%3E" alt="" class="function-icon">
          </div>
          <span class="function-name">文档协作</span>
        </div>
        <div class="function-item" @click="navigateToTaskManage">
          <div class="icon-container" style="background-color: #ffebee;">
            <van-icon name="todo-list" size="24" color="#e91e63" />
          </div>
          <span class="function-name">任务管理</span>
        </div>
      </div>
    </div>

    <!-- 系统设置区域 -->
    <div class="function-section">
      <div class="section-header">
        <h4>系统设置</h4>
      </div>
      <div class="function-grid">
        <div class="function-item" @click="navigateTo('/user/edit')">
          <div class="icon-container" style="background-color: #e3f2fd;">
            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%232196f3' d='M512 0c-282.752 0-512 229.248-512 512s229.248 512 512 512 512-229.248 512-512-229.248-512-512-512zM512 960c-247.424 0-448-200.576-448-448s200.576-448 448-448 448 200.576 448 448-200.576 448-448 448zM704 512c0-106.042-85.958-192-192-192s-192 85.958-192 192 85.958 192 192 192 192-85.958 192-192zM512 640c-70.336 0-128-57.664-128-128s57.664-128 128-128 128 57.664 128 128-57.664 128-128 128z'/%3E%3C/svg%3E" alt="" class="function-icon">
          </div>
          <span class="function-name">个人设置</span>
        </div>
        <div class="function-item" @click="showToast('功能开发中')">
          <div class="icon-container" style="background-color: #e8f5e8;">
            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%234caf50' d='M512 0c-282.752 0-512 229.248-512 512s229.248 512 512 512 512-229.248 512-512-229.248-512-512-512zM512 960c-247.424 0-448-200.576-448-448s200.576-448 448-448 448 200.576 448 448-200.576 448-448 448zM416 448h192v96h-192v-96zM416 576h192v96h-192v-96z'/%3E%3C/svg%3E" alt="" class="function-icon">
          </div>
          <span class="function-name">隐私设置</span>
        </div>
        <div class="function-item" @click="navigateTo('/protocol')">
          <div class="icon-container" style="background-color: #f3e5f5;">
            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%239c27b0' d='M512 0c-282.752 0-512 229.248-512 512s229.248 512 512 512 512-229.248 512-512-229.248-512-512-512zM512 960c-247.424 0-448-200.576-448-448s200.576-448 448-448 448 200.576 448 448-200.576 448-448 448zM672 480l-192-192-192 192 44.8 44.8 147.2-147.2 147.2 147.2z'/%3E%3C/svg%3E" alt="" class="function-icon">
          </div>
          <span class="function-name">用户协议</span>
        </div>
        <div class="function-item" @click="logout">
          <div class="icon-container" style="background-color: #ffebee;">
            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23f44336' d='M512 0c-282.752 0-512 229.248-512 512s229.248 512 512 512 512-229.248 512-512-229.248-512-512-512zM512 960c-247.424 0-448-200.576-448-448s200.576-448 448-448 448 200.576 448 448-200.576 448-448 448zM640 512h-192v-128l-128 128 128 128v-128h192v-192z'/%3E%3C/svg%3E" alt="" class="function-icon">
          </div>
          <span class="function-name">退出登录</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import 'vant/es/toast/style';
import { userStore } from '../stores/user/user.ts';
import { removeToken } from '../request/request.ts';

const router = useRouter();
const userStoreAPI = userStore();
const userName = ref('');
const userDesc = ref('');

// 获取用户信息
onMounted(() => {
  // 从store中获取用户信息
  const userInfo = userStoreAPI.getCurrentUser();
  if (userInfo) {
    userName.value = userInfo.userName || '我的';
    userDesc.value = userInfo.userProfile || '智能伙伴系统';
  }
});

// 导航到指定页面
const navigateTo = (path) => {
  router.push(path);
};

// 导航到任务管理页面
const navigateToTaskManage = () => {
  router.push('/task/manage');
};

// 导航到文档管理页面
const navigateToDocumentManage = () => {
  router.push('/document/manage');
};

// 显示提示信息
const showToastMessage = (message) => {
  showToast(message);
};

// 退出登录
const logout = () => {
  // 清除 token
  removeToken();
  // 清除用户信息
  userStore.setUserInfo(null);
  // 跳转到登录页面
  router.push('/login');
};
</script>

<style scoped>
.more-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 80px; /* 为底部导航栏留出空间 */
}

/* 用户信息区域 */
.user-info-section {
  display: flex;
  align-items: center;
  padding: 20px 16px;
  background-color: #fff;
  margin-bottom: 12px;
}

.avatar-area {
  margin-right: 16px;
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #e3f2fd;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 4px 0;
  color: #333;
}

.user-desc {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* 功能分类区域 */
.function-section {
  background-color: #fff;
  margin-bottom: 12px;
  padding: 12px 0;
}

.section-header {
  padding: 0 16px 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 12px;
}

.section-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* 功能网格 */
.function-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 8px;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 4px;
  margin-bottom: 8px;
  cursor: pointer;
}

.function-item:active {
  background-color: #f5f5f5;
  border-radius: 8px;
}

.icon-container {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.function-icon {
  width: 28px;
  height: 28px;
}

.function-name {
  font-size: 13px;
  color: #333;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 响应式调整 */
@media (max-width: 375px) {
  .function-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .icon-container {
    width: 50px;
    height: 50px;
  }
  
  .function-icon {
    width: 24px;
    height: 24px;
  }
  
  .function-name {
    font-size: 12px;
  }
}
</style>